<template>
    <view class="content">
		<page-head :title="i18n.main.code"></page-head>
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>
			<image src="../../static/center/logo.png" mode="widthFix" class="top-left"></image>
		<!-- <image src="../../static/page/qrcode.jpg" mode="widthFix" class="qrcode"></image> -->
		<image src="../../static/page/forget.png" mode="widthFix" class="center"></image>
		<image :src="qrcode" mode="widthFix" class="qr-code"></image>
		<view class="icone">{{icode}}</view>
		<image :src="back_img" mode="" class="back_img" :style="height"></image>
    </view>
</template>

<script>
	import service from '../../service.js';
	import pageHead from '../../components/page-head.vue';
	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			pageHead,
        },
		data() {
			return {
				back_img:uni.getStorageSync('page'),
				height:uni.getStorageSync('height'),
				user:uni.getStorageSync('user'),
				qrcode:'',
				icode:'',
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.main.code
			});
			
			service.upload(this, service.api.user.code, {
				
			}, '', '', function(self, res) {
				if(res.code == 1){
					self.qrcode = res.data.qrcode;
					self.icode = res.data.icode;
				}else{
					uni.showModal({
						title: '温馨提示',
						content: res.info,
						confirmText: '确认',
						confirmColor: '#FFAE00',
						cancelColor: '#D2D2D2',
						showCancel: false,
						success: function(res) {
							uni.switchTab({
								url: '/pages/main/user',
							});
						}
					});
				}
			});
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/main/user'
				})
			},
			transfer(){
				
			}
		}
    }
</script>

<style lang="scss">
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.qrcode{
		z-index: 40;
		width: 100%;
		height: 1300upx;
		position: fixed;
		
	}
	.qr-code,.icone{
		z-index: 50;
		width: 320upx;
		height: 320upx;
		margin: 0 calc(50% - 160upx);
		margin-top: 660upx;
		position: absolute;
		background: #FFFFFF;
	}
	.icone{
		height: 60upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		margin-top: 1100upx;
		border-radius: 20upx;
		background: rgba(0, 0, 0, 0.2);
	}
	.back_img{
		margin: 0;
		height: 100%;
	}
	.center{
		width: 70%;
		z-index: 50;
		height: 510upx;
		margin: 120upx 15% 0;
		position: absolute;
	}
</style>